<template lang="">
	<uni-popup
		class="popup"
		ref="popup"
		type="center"
		:mask-background-color="maskBg"
		:safe-area="false"
		@maskClick="maskClick"
		:mask-click="false"
		:is-mask-click="false"
	>
		<view class="centerDrawer" :style="{ background, backdropFilter: background ? '' : 'blur(30px)' }">
			<template v-if="showTitle">
				<view class="drawerHead">
					<view class="title" v-if="titlePosition == 'left'">{{ title }}</view>
					<view v-else></view>
					<view class="title" v-if="titlePosition == 'center'">{{ title }}</view>
					<view v-else></view>
					<image v-if="showClose" src="@/static/ring/close.png" class="w-44rpx" mode="widthFix" @click="change(false)" />
				</view>
				<view class="line" v-if="titleLine"></view>
			</template>
			<view class="drawer-content" :style="contentStyle">
				<slot></slot>
			</view>
		</view>
	</uni-popup>
</template>
<script>
export default {
	props: {
		value: Boolean,
		title: String,
		contentStyle: Object,
		showClose: {
			type: Boolean,
			default: true,
		},
		background: {
			type: String,
			default: "",
		},
		titlePosition: {
			type: String,
			default: "left",
		},
		titleLine: Boolean,
		maskBg: {
			type: String,
			default: "rgba(0,0,0,0.6)",
		},
		showTitle: {
			type: Boolean,
			default: true,
		},
	},
	data() {
		return {
			popup: null,
		};
	},

	computed: {
		v() {
			return this.value || false;
		},
	},

	watch: {
		v(nv) {
			this.change(nv);
		},
	},

	mounted() {
		this.$nextTick(() => {
			this.popup = this.$refs.popup;
		});
	},

	methods: {
		change(val) {
			this.$emit("input", val);
			this.$emit("change", val);
			if (!this.popup) return;
			if (val) {
				this.popup.open();
			} else {
				this.popup.close();
			}
		},

		maskClick() {
			this.change(false);
			this.$emit("maskClick");
		},
	},
};
</script>

<style lang="scss" scoped>
.centerDrawer {
	position: relative;
	width: 100%;
	border-radius: 48rpx 48rpx 0 0;
	padding-bottom: env(safe-area-inset-bottom);
	background: linear-gradient(180deg, #b9e8ff 0%, #ffffff 51.46%);
	// background-color: rgba($color: #1d1d1d, $alpha: 0.8);

	.w-44rpx {
		width: 44rpx;
	}

	/* backdrop-filter: blur(30px); */
	.drawerHead {
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: 40rpx;

		.title {
			font-size: 40rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #ffffff;
		}
	}

	.line {
		width: 100%;
		height: 1rpx;
		background-color: rgba($color: #fff, $alpha: 0.3);
	}

	.drawer-content {
		width: 100%;
		padding: 0 40rpx;
		color: #fff;
	}
}
</style>
